/**
 * 画板列表 created to by doujiabao 20200622
 */

import React, { Component } from 'react'

import Router from 'next/router'

import config from '~/static/config'
import moment from 'moment'

import {
    Row,
    Col,
    message,
    Button,
} from 'antd'
import {
    LikeOutlined
} from '@ant-design/icons'
import Page from '@/components/Page'

class DrawingList extends Component {

    state = {
        //空
        isEmpty: true,
        //加载
        loading: false,
        //列表数据
        data: [],
    }

    componentDidMount() {
        this.fetchDrawingList()
    }

    fetchDrawingList = (loading = true) => {
        this.setState({
            loading
        }, () => {
            fetch(`${config.baseURL}/blog/drawings`)
                .then(response => {
                    return response.json()
                })
                .then(res => {
                    const data = res.data ? res.data : []
                    this.setState({
                        data,
                        loading: false,
                        isEmpty: !data.length
                    })
                })
                .catch(err => {
                    this.setState({
                        data: [],
                        loading: false,
                        isEmpty: true
                    })
                })
        })
    }

    handleGoDrawing = () => {
        Router.push('/drawing')
    }

    handleOpenDrawing = (src) => {
        window.open(src)
    }

    render() {

        const {
            isEmpty,
            loading,
            data,
        } = this.state

        return (<Page
            isEmpty={isEmpty}
            loading={loading}
        >
            <div className='main'>

                <div className='add' onClick={this.handleGoDrawing}>我也<span>试试</span></div>
                <Row>
                    {data.map((itm, idx) => (
                        <Col key={idx} span={8}>
                            <div className='drawingItem'>
                                <div
                                    className='board'
                                    onClick={() => { this.handleOpenDrawing(itm.src) }}
                                    style={{
                                        background: `#ffffff url(${itm.src}) no-repeat`,
                                        backgroundSize: 'contain',
                                        backgroundPosition: 'center center'
                                    }}></div>
                                <div className='name'>名称：<span>{itm.name}</span></div>
                                <div className='time'>发布时间：<span>{moment(+itm.time * 1000).format('YYYY-MM-DD HH:mm:ss')}</span></div>
                                <i className='zan' onClick={() => {
                                    message.error('404')
                                }}><LikeOutlined /></i>
                            </div>
                        </Col>
                    ))}
                </Row>

            </div>

            {/* 样式 */}
            <style jsx>{`
                .main {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding-top: 100px;
                    min-height: calc(100vh - 100px);
                }
                .drawingCol {
                    margin-bottom: 30px;
                }
                .drawingItem {
                    border-radius: 4px;
                    width: 360px;
                    background: #000000;
                    margin: 0 auto 30px;
                    padding: 20px 0 10px;
                    overflow: hidden;
                    color: #f39d38;
                    box-sizing: border-box;
                }
                .drawingItem .board {
                    width: 320px;
                    height: 240px;
                    margin: 0 auto;
                    cursor: pointer;
                }
                .drawingItem .name {
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .drawingItem .name, .drawingItem .time {
                    margin-top: 12px;
                    padding: 0 20px;
                }
                .drawingItem .name span, .drawingItem .time span {
                    font-weight: bold;
                }
                .zan {
                    display: inline-block;
                    padding: 10px;
                    margin-left: 10px;
                    cursor: pointer;
                }
                .add {
                    display: inline-block;
                    padding: 6px 10px;
                    border-radius: 6px;
                    background: #000000;
                    color: #ffffff;
                    margin: 0 0 20px 0;
                    border: 1px solid #ffffff;
                }
                .add span {
                    display: inline-block;
                    padding: 2px 4px;
                    background: #f39d38;
                    color: #000000;
                    border-radius: 6px;
                    margin-left: 6px;
                    cursor: pointer;
                }
            `}</style>
        </Page>)
    }

}

export default DrawingList